<template>
  <div class="app-container drag-container">
    <el-row :gutter="0">
      <el-col :xs="24" :sm="6" :md="5" :lg="4" class="drag-area" id="drag-area">
        <div style="text-align: center;color: #0fa8e7;">数据选择</div>

        <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
<!--      侧边栏拖拽框 -->
        <div class="drag-tip" id="drag-tip">
        </div>
      </el-col>

      <el-col :xs="24" :sm="18" :md="18.7" :lg="20"  id="drag-content">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">

          <el-form-item label="学校名称">
            <el-input v-model="formInline.schoolName" placeholder="学校名称"></el-input>
          </el-form-item>

          <el-form-item label="学年名称">
            <el-input v-model="formInline.schoolYear" placeholder="学年名称"></el-input>
          </el-form-item>

          <el-form-item label="学期名称">
            <el-input v-model="formInline.schoolSemester" placeholder="学期名称"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search"  @click="onSubmit">搜索</el-button>
          </el-form-item>
        </el-form>

         <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
              v-hasPermi="['org:course:add']"
            >新增</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="success"
              plain
              icon="el-icon-edit"
              size="mini"
              :disabled="single"
              @click="handleUpdate"
              v-hasPermi="['org:course:edit']"
            >修改</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="danger"
              plain
              icon="el-icon-delete"
              size="mini"
              :disabled="multiple"
              @click="handleDelete"
              v-hasPermi="['org:course:remove']"
            >删除</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              :loading="exportLoading"
              @click="handleExport"
              v-hasPermi="['org:course:export']"
            >导出</el-button>
          </el-col>
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

         <el-table :data="tableData" style="width: 100%"
          :row-class-name="tableRowClassName">
           <el-table-column type="selection" width="55" align="center" />

          <el-table-column prop="name" label="学校名称" width="180">
          </el-table-column>

          <el-table-column prop="year" label="学年名称" width="180">
          </el-table-column>

           <el-table-column prop="semester" label="学期名称" width="180">
          </el-table-column>

          <el-table-column prop="startTime" label="学期开始时间" width="180">
          </el-table-column>

          <el-table-column prop="endTime" label="学期结束时间" width="180">
          </el-table-column>

           <el-table-column prop="description" label="学期描述" width="180">
          </el-table-column>



          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click=" editDialog(scope.row)"
                v-hasPermi="['org:course:edit']"
              >修改</el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
                v-hasPermi="['org:course:remove']"
              >删除</el-button>
            </template>
          </el-table-column>


        </el-table>

         <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"

        />

      </el-col>
        <!-- 新增教师对应的课程 -->
        <el-dialog :title="schoolTitle" :visible.sync="addDialogVisible"
          width="50%" >
          <el-form label-position="left" label-width="100px" :model="addForm" >

          <el-form-item label="学校名称">
             <el-cascader v-model="addForm.name" style="width: 100%;" :options="schoolOptions"  @change="handleChange"></el-cascader>
          </el-form-item>

           <el-form-item label="学年名称">
            <el-cascader v-model="addForm.year" style="width: 100%;" :options="yearOptions"  @change="handleChange"></el-cascader>
          </el-form-item>

          <el-form-item label="学期名称">
              <el-input v-model="addForm.semester" placeholder="请输入学期名称"></el-input>
          </el-form-item>

           <el-form-item label="学期开始时间">
              <el-date-picker v-model="addForm.startTime"
                type="date"  style="width: 100%;" placeholder="选择学期开始时间">
              </el-date-picker>

          </el-form-item>

          <el-form-item label="学期结束时间">
              <el-date-picker v-model="addForm.endTime"
                type="date" style="width: 100%;"  placeholder="选择学期结束">
              </el-date-picker>

          </el-form-item>

           <el-form-item label="学期描述">
              <el-input v-model="addForm.description" placeholder="请输入学期描述"></el-input>
          </el-form-item>

        </el-form>



          <span slot="footer" class="dialog-footer">
            <el-button @click="addDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addDialogVisible = false">确 定</el-button>
          </span>
        </el-dialog>

     </el-row>
  </div>

</template>

<script>
export default {
  name: "teacherCourse",
  data(){
    return {
       data: [ {
          label: '广州大学',
          children: [
            {
              label: '2017学年',
              children: [
                {
                  label: '上学期',
                },
                 {
                  label: '下学期',
                }
              ]
            },
             {
              label: '2018学年',
              children: [
                {
                  label: '上学期',
                },
                 {
                  label: '下学期',
                }
              ]
            },
            {
              label: '2019学年'
            }
          ]
        },
        {
          label: '中山大学',
          children: [
            {
              label: '2017学年',
              children: [
                {
                  label: '上学期',
                },

              ]
            },
             {
              label: '2018学年',
              children: [
                {
                  label: '上学期',
                },
                 {
                  label: '下学期',
                }
              ]
            },
            {
              label: '2019学年'
            }
          ]
        },
        {
          label: '深圳大学',
          children: [
            {
              label: '2017学年',

            },
             {
              label: '2018学年',
              children: [
                {
                  label: '上学期',
                },
                 {
                  label: '下学期',
                }
              ]
            },
            {
              label: '2019学年'
            }
          ]
        },




      ],

      defaultProps: {
        children: 'children',
        label: 'label'
      },
      formInline: {
        schoolName: '',
        schoolYear: '',
        schoolSemester: ''
      },
      tableData: [
        {
          // 学校名称
          name: '广州大学',
          // 学年名称
          year:'2017学年',
          // 学期名称
          semester:'上学期',
          // 学期开始时间
          startTime: '3月1日',
          // 学期结束时间
          endTime:'6月20日',
          // 学期描述
          description: '春季学期',
        },
         {
          // 学校名称
          name: '广州大学',
          // 学年名称
          year:'2017学年',
          // 学期名称
          semester:'下学期',
          // 学期开始时间
          startTime: '9月1日',
          // 学期结束时间
          endTime:'12月20日',
          // 学期描述
          description: '秋季学期',
        },
         {
          // 学校名称
          name: '中山大学',
          // 学年名称
          year:'2017学年',
          // 学期名称
          semester:'上学期',
          // 学期开始时间
          startTime: '3月1日',
          // 学期结束时间
          endTime:'6月20日',
          // 学期描述
          description: '春季学期',
        },



      ],
      // 总条目数
      total: 10,
       // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        courseName: null,
        courseCode: null,
        startingUnit: null,
        courseNature: null,
        courseAttribute: null,
        courseCredit: null
      },
      // 添加教师对应课程的弹框
      addDialogVisible: false,
      addForm: {
        // 学校名称
        name: '',
        // 学年名称
        year:'',
        // 学期名称
        semester: '',
        // 学期开始时间
        startTime: '',
        // 学期结束时间
        endTime: '',
        // 学期描述
        description: '',
      },

      semesterTitle: '',
      schoolOptions: [
        {
          value: '广州大学',
          label: '广州大学',
        },
         {
          value: '中山大学',
          label: '中山大学',
        },
         {
          value: '深圳大学',
          label: '深圳大学',
        },
      ],

      yearOptions: [
        {
          value: '2017学年',
          label: '2017学年',
        },
         {
          value: '2018学年',
          label: '2018学年',
        },
         {
          value: '2019学年',
          label: '2019学年',
        },
      ],



    }

  },
  methods: {
    handleNodeClick(data) {
        console.log(data);
    },
    onSubmit() {
      console.log('submit!');
    },
    handleAdd(){
      this.semesterTitle='新增学期信息';
      this.addDialogVisible=true;
    },
    editDialog(id){
       this.semesterTitle='修改学期信息';
      this.addDialogVisible=true;
    },

  },
  mounted(){
    console.log('************mounted*****************');

  }

}

</script>

<style>
  ::v-deep .dialog-footer:after {
  content: '';
  display: table;
  clear: both;
}

</style>
